<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HomeWork_Day1</title>
</head>
<body>
    <div>
        <p class="text">Hello world!</p>
        <br>
        <button class="but_1" onclick="but_1()" style="display:block;margin:0 auto">变为红色</button>
        <br>
        <br>
        <button class="but_2" onclick="but_2()" style="display:block;margin:0 auto">复原</button>
    </div>
    
      
</body>
<style>
.text{
    text-align:center;
    font-size: 40px;
}
.but_1{
    font-size: 30px;
}
.but_2{
    font-size: 30px;
}
</style>
<script>
    function but_1(){
        var x=document.getElementsByClassName("text");
        x[0].style.color="red";
    }
    function but_2(){
        var x=document.getElementsByClassName("text");
        x[0].style.color="black";
    }
</script>
</html>